import React, { Component } from 'react';
import { Popup, List, Button, Icon } from 'antd-mobile';
import { Player, playerActions } from 'video-react';
import * as voteApi from 'common/api/voteapi.js';
import './detail.less';
import './video-react.less';

const main_bg = {
  background: `url(${"assets/img/bg.jpg"})`,
  backgroundSize: "cover",
	backgroundRepeat: "no-repeat"
};

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let maskProps;
if (isIPhone) {
  // Note: the popup content will not scroll.
  maskProps = {
    onTouchStart: e => e.preventDefault(),
  };
}

/**
 * 详情组件
 */
class Detail extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	videoInfo:{}
	    }
	}    
	
	componentDidMount(){
		setTimeout(() => {
      	voteApi.videoDetail({
					videoId: this.props.params.videoId,
		  	}).then(result => {
		  		if(result.resultCode == "0"){
		  			this.setState({
		  				videoInfo: result.resultData
		  			})
		  		}
		  	})
    }, 500);
	}
	
	//返回
	back = () => {
		window.history.back();
	}
	
	//播放视频
	play = () => {
		Popup.show(<Player ref={el => this.player = el}>
				      <source src="http://112.5.254.247/sh.yinyuetai.com/uploads/videos/common/71330164D48CBCC06BCAC935DAEB5AD5.mp4" />
				    </Player>, { animationType: 'slide-up', maskProps, maskClosable: true });
		this.player.video.play();
	}
	
	render(){
		const { videoInfo } = this.state;
		return(
			<div className="detail" style={main_bg}>
				<div className="header">
					<img src="assets/img/icon_1.png" onClick={this.back.bind(this)}/>
					<span>评选对象</span>
				</div>
				<div className="line"></div>
				<div className="info">
					<div className="title">
						<img className="play_img" src="assets/img/play.png" onClick={this.play.bind(this)}/>
						<img className="info_img" src={videoInfo.videoImg} onClick={this.play.bind(this)}/>
						<span>《作品名:&nbsp;{videoInfo.videoName}》</span>
					</div>
					<div className="voteInfo">
						<div className="left">
							<img src="assets/img/icon_2.png"/>
							<span>排名:&nbsp;{videoInfo.ranking}</span>
						</div>
						<div className="right">
							<img src="assets/img/icon_3.png"/>
							<span>票数:&nbsp;{videoInfo.voteNum}</span>
						</div>
					</div>
					<div className="vote_rule_title">
						<span>作品说明:</span>
					</div>
					<div className="vote_rule_box">
						<div className="vote_rule">
							<div className="vote_rule_01">
								<span>
									{videoInfo.videoDesc}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

export default Detail;